<template>
    <div class="allorder">
        <van-nav-bar title="所有订单" left-text left-arrow @click-left="$router.go(-1)">
        <van-icon name="service-o" slot="right" />
        </van-nav-bar>
        <van-tabs v-model="active">
            <van-tab title="全部订单">
                <div class="perorder" v-for="(item,index) in allorders" :key="index">
                <p style="width:100%;height:0.3rem;font-size:0.16rem">订单号：{{item.order_id}}</p>
                <div class="order2" v-for="iteml in item.order_products" :key="iteml._id">
                <div>
                    <img :src="iteml.product.coverImgUrl" alt />
                </div>
                <div>
                <p>{{iteml.product.desc}}</p>
                <p>数量X{{iteml.quantity}}</p>
                </div>
                <span>{{iteml.quantity*iteml.product.product_price}}</span>
            </div>  
        </div>
            </van-tab>
            <van-tab title="待付款"></van-tab>
            <van-tab title="今日配送"></van-tab>
            <van-tab title="待评价"></van-tab>
        </van-tabs>
    </div>
</template>
<style scoped>
.allorder {
    width: 100%;
    height: 100%;
    flex: 1;
    background: #e8edf1;
    overflow: auto;
    display: flex;
    flex-direction: column;
}
.total-tag {
    border-top: 0.01rem solid #E9ECF1;
    width: 100%;
    height: 0.5rem;
    font-size: 0.16rem;
    display: flex;
    justify-content: space-around;
    line-height: 0.5rem;
    background: #fff;
    margin-top: 0.01rem;
}

.total-tag p {
    height: 0.4rem;
    width: 20%;
    margin: 0;
}

.total-tag p:hover {
    color: rgb(223, 117, 18);
}
.allorder .perorder{
    width: 100%;
    background: #fff
}
.allorder .order2 {
    width: 100%;
    height: 1rem;
    display: flex;
    justify-content: left;
    background: rgb(219, 215, 217);
    font-size: 0.16rem;
    margin-bottom: 0.01rem;
}

.allorder .order2 div:nth-child(1) {
    margin-left: 0.1rem;
    width: 1rem;
    height: 1rem;
    background: cadetblue;
}

.allorder .order2 img {
    width: 1rem;
    height: 1rem;
}

.allorder .order2 div:nth-child(2) {
    padding-top: 0.1rem;
    padding-left: 0.1rem;
    display: flex;
    flex-direction: column;
    width: 53%;
    text-align: left;
}

.allorder .order2 div:nth-child(2) p:nth-child(1) {
    height: 0.4rem;
    line-height: 0.2rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
}

.allorder .order2 div:nth-child(2) p:nth-child(2) {
    margin-top: 0.15rem;
}

.allorder .order2 span {
    line-height: 1rem;
}

</style>
<script>
import { mapState, mapMutations, mapAction } from "vuex";
export default {
  data() {
    return {
      active: 0,
      allorders:[]
    };
  },
  created(){
      console.log(JSON.parse(localStorage.getItem('allOrder')) )
      this.allorders=JSON.parse(localStorage.getItem('allOrder'))
      this.$forceUpdate();
  },
  computed: { 
    ...mapState("product", [
      "allorder",
    ])
  }
}
</script>